import React from 'react';
import Cubox from '../cubic-ui/cubox';

const CuboxButton = ({
  children,
  variant = 'primary',
  size = 'md',
  type = 'button',
  className = '',
  cornerRadius = 12,
  strokeWidth = 1,
  isOutlined = false,
  width = 140,
  ...props
}) => {
  const variants = {
    primary: {
      backColor: '#3b82f6', // primary-600
      foreColor: '#ffffff',
      hoverBackColor: '#2563eb', // primary-700
      hoverForeColor: '#ffffff'
    },
    secondary: {
      backColor: '#ffffff',
      foreColor: '#374151', // gray-700
      hoverBackColor: '#f9fafb', // gray-50
      hoverForeColor: '#374151'
    },
    danger: {
      backColor: '#ffffff',
      foreColor: '#374151',
      hoverBackColor: '#f9fafb',
      hoverForeColor: '#dc2626' // red-600
    }
  };

  const sizes = {
    sm: { height: 32 },
    md: { height: 40 },
    lg: { height: 48 }
  };

  const currentVariant = variants[variant];
  const currentSize = sizes[size];

  return (
    <Cubox
      cornerRadius={cornerRadius}
      strokeWidth={strokeWidth}
      isOutlined={isOutlined}
      backColor={currentVariant.backColor}
      foreColor={currentVariant.foreColor}
      className={`inline-flex items-center justify-center font-medium transition-colors duration-200 cursor-pointer ${className}`}
      style={{
        width,
        ...currentSize,
        ...props.style
      }}
      onClick={props.onClick}
    >
      <div 
        className="flex items-center justify-center w-full h-full px-3 py-2 text-sm"
        style={{ color: currentVariant.foreColor }}
      >
        {children}
      </div>
    </Cubox>
  );
};

export default CuboxButton; 